<script lang="ts" setup>
import UseWindowsInfo from "../../hooks/UseWindowsInfo";
import {useUserStore} from "../../store/user";
import {onMounted, onUnmounted, reactive, Ref, ref} from "vue";
import Cx_Bus from "../../common/Utils/MittUtils";
import CX_List from "../../components/CX_List/CX_List.vue";
import {CX_ListType} from "../../common/Type/CX_ListType";
import {CollectType} from "../../common/Type/CollectType";
import {RequestUtils} from "../../common/Utils/RequestUtils";
import CXMessageUtils from "../../common/Utils/CXMessageUtils";
import {useRoute} from "vue-router";

const {windowsHeight} = UseWindowsInfo()
const userStore = useUserStore()
const cxlist = ref()
/**
 * 搜索条件
 */
const keyword = ref("")
const visible = ref(false)
const where = reactive({
  folderType:""
})
let methods:CX_ListType = reactive({} as CX_ListType)
// 用户的所有文件夹名称
const userFolderAll = ref<string[]>([])
const updatedata = ref<CollectType>({} as CollectType)
// 添加数据的弹窗
const Addvisible: Ref<boolean> = ref(false)
// 添加数据的类
let addCollect: CollectType = reactive({} as CollectType)
/**
 * 组件加载完成
 * @param m
 */
const loadOk = (m):void=>{
  methods = m;
}
/**
 * 删除收藏夹
 */
const deleteWebPage = (item:CollectType): void => {
  RequestUtils({
      url: `Collect/FalseDeleteUserCollect?uuid=${item.buuid}`,
      method: "get"
    }).then(() => {
      methods.LoadData()
      CXMessageUtils.CX_Success("删除成功")
    })
}
/**
 * 分享收藏
 * @param item
 * @constructor
 */
const UserShareCollect = (item:CollectType): void => {
  RequestUtils({
    url: `Collect/UserShareCollect?uuid=${item.buuid}`,
    method: "get"
  }).then(() => {
    methods.LoadData()
    CXMessageUtils.CX_Success("分享成功")
  })
}
/**
 * 取消分享
 * @param item
 * @constructor
 */
const CancelCollect = (item:CollectType): void => {
  RequestUtils({
    url: `Collect/CancelCollect?uuid=${item.buuid}`,
    method: "get"
  }).then(() => {
    methods.LoadData()
    CXMessageUtils.CX_Success("取消分享成功")
  })
}
/**
 * 获取用户所有的文件夹名称
 * @constructor
 */
const GetFolderNameAll = ()=>{
  return new Promise((resolve,reject)=>{
    RequestUtils({
      url: `Folder/GetFolderNameAll`,
      method: "get"
    }).then(data => {
      userFolderAll.value = data as any
      resolve(data as any)
    }).catch(err=>{
      reject(err)
    })
  })
}
/**
 * 修改数据展示
 */
const updateCollect = (item)=>{
  GetFolderNameAll().then(data=>{
    visible.value = true
    updatedata.value = item
    userFolderAll.value = data as any
  })
}
/**
 * 修改收藏地址
 */
const updateCollectFolder = ()=>{
  RequestUtils({
    url:`Collect/UpdateCollectFolder?uuid=${updatedata.value.buuid}&&foldername=${updatedata.value.foldername}`,
    method:'get'
  }).then(()=>{
    CXMessageUtils.CX_Success("修改成功")
    visible.value = false
    methods.LoadData()
  })
}
/**
 * 添加数据
 * @constructor
 */
const AddhandleOk = (): void => {
  if (!addCollect.bname) {
    CXMessageUtils.CX_Warning("请输入名称")
    return;
  }
  if (!addCollect.bexplain) {
    CXMessageUtils.CX_Warning("请输入链接介绍")
    return;
  }
  if (!addCollect.burl) {
    CXMessageUtils.CX_Warning("请输入链接地址")
    return;
  }
  if (!addCollect.foldername) {
    CXMessageUtils.CX_Warning("请选择文件夹")
    return;
  }
  RequestUtils({
    url: "Collect/UpdateCollect",
    method: "post",
    data: addCollect
  }).then(() => {
    Addvisible.value = false
    addCollect.bexplain = ""
    addCollect.burl = ""
    addCollect.bname = ""
    addCollect.foldername = ""
    CXMessageUtils.CX_Success("收藏成功")
    methods.LoadData()
  })
}
const Addcancel = (): void => {
  Addvisible.value = false
  addCollect.bexplain = ""
  addCollect.burl = ""
  addCollect.bname = ""
}
/**
 * 添加数据的弹窗按钮
 */
const Add = (item): void => {
  GetFolderNameAll().then(()=>{
    if (userFolderAll.value.length<1){
      CXMessageUtils.CX_Warning("请先添加文件夹在进行添加网页收藏")
      return
    }
    addCollect.bexplain = item.bexplain
    addCollect.bname = item.bname
    addCollect.bstate = item.bstate
    addCollect.burl = item.burl
    addCollect.buuid = item.buuid
    addCollect.createtime = item.createtime
    addCollect.foldername = item.foldername
    addCollect.folderuuid = item.folderuuid
    addCollect.isshare = item.isshare
    addCollect.userid = item.userid
    addCollect.username = item.username
    Addvisible.value = true
  })
}
onMounted(() => {
  // 开启监听
  Cx_Bus.on("Tool-Search", (keywordvalue) => {
    keyword.value = keywordvalue
    methods.LoadData()
  })
  Cx_Bus.on("Tool-AddData",()=>{
    methods.LoadData()
  })
  const route = useRoute()
  where.folderType = route.query.folderType as string
})
onUnmounted(() => {
  // 关闭监听
  Cx_Bus.off("Tool-Search")
  Cx_Bus.off("Tool-AddData")
})
</script>

<template>
  <div :style="{'height':windowsHeight-65+'px',...userStore.themeColor}">
    <CX_List
        ref="cxlist"
        url="Collect/GetUserCollect"
        method="post"
        :height="windowsHeight-70"
        @loadOk="loadOk"
        :where="where"
        :keyword="keyword">
      <template v-slot:default="{item}">
        <a-dropdown>
          <icon-more class="mousecursor" size="20" :strokeWidth="5"/>
          <template #content>
            <a-doption @click="UserShareCollect(item)">
              <template #icon>
                <icon-share-alt />
              </template>
              <template #default>
                <div>分享收藏</div>
              </template>
            </a-doption>
            <a-doption @click="updateCollect(item)">
              <template #icon>
                <icon-import />
              </template>
              <template #default>
                <div>移动收藏</div>
              </template>
            </a-doption>
            <a-doption @click="Add(item)">
              <template #icon>
                <icon-tool />
              </template>
              <template #default>
                <div>修改内容</div>
              </template>
            </a-doption>
            <a-doption @click="CancelCollect(item)">
              <template #icon>
                <icon-eye-invisible />
              </template>
              <template #default>
                <div>取消分享</div>
              </template>
            </a-doption>
            <a-doption @click="deleteWebPage(item)">
              <template #icon>
                <icon-delete style="color: red;"/>
              </template>
              <template #default>
                <div style="color: red;">删除收藏</div>
              </template>
            </a-doption>
          </template>
        </a-dropdown>
      </template>
    </CX_List>
  </div>
  <a-modal v-model:visible="visible" :width="300" :mask-closable="false" @ok="updateCollectFolder">
    <template #title>
      修改收藏地址
    </template>
    <div>
      <a-select :default-active-first-option="true" v-model="updatedata.foldername" placeholder="请选择文件夹">
        <a-option v-for="item of userFolderAll" :value="item" :label="item" />
      </a-select>
    </div>
  </a-modal>
  <a-modal :mask-closable="false" :visible="Addvisible" @cancel="Addcancel" @ok="AddhandleOk" draggable>
    <template #title>添加收藏数据</template>
    <a-form :model="addCollect" :style="{width:'400px'}" ref="formRef">
      <a-form-item field="bname" label="名称">
        <a-input v-model="addCollect.bname" placeholder="请输入名称"/>
      </a-form-item>
      <a-form-item field="bexplain" label="介绍">
        <a-input v-model="addCollect.bexplain" placeholder="请填写链接介绍"/>
      </a-form-item>
      <a-form-item field="burl" label="链接">
        <a-input v-model="addCollect.burl" placeholder="请填写链接地址"/>
      </a-form-item>
      <a-form-item field="foldername" label="文件夹">
        <a-select :default-active-first-option="true" v-model="addCollect.foldername" placeholder="请选择文件夹">
          <a-option v-for="item of userFolderAll" :value="item" :label="item" />
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped>

</style>
